<template>
    <div class="xj-wrapper">
        <div class="xj-header"><span>店铺装修/自定义页面/移动端页面/DIY</span></div>
        <div class="xj-main">
            <div class="xj-set">
                <div class="xj-scroll">
                    <div class="xj-pageelement">
                        <div class="xj-elementheader"><span>页面元素</span></div>
                        <div class="xj-moreelement">
                            <div
                                class="object-item"
                                @click="addElement(item.id)"
                                :data-name="item.name"
                                :key="index"
                                v-for="(item, index) in pageelementlist"
                            >
                                <i :class="item.class ? item.class : 'iconfont'" v-html="item.icon ? item.icon : ''"></i>
                                <p>{{ item.cnname }}</p>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="xj-contentlist">
						<div class="xj-elementheader"><span>内容列表</span></div>
						<div class="xj-moreelement">
							<div class="object-item" @click="addElement($event)" :data-name="item.name" :key="index"
								v-for="(item,index) in contentelementlist"><i :class="item.class?item.class:'iconfont'" 
									v-html="item.icon?item.icon:''"></i>
								<p>{{item.cnname}}</p>
							</div>
						</div>
					</div> -->
                    <div class="xj-save">
                        <el-button type="success" class="xj-btn" @click="savePhone()">保存</el-button>
                    </div>
                </div>
            </div>
            <div class="xj-show">
                <div class="xj-phoneshow">
                    <div class="xj-phonetop">
                        <div class="xj-pageheader">
                            <div class="config-preview">
                                <span class="page-title"> 点击设置页面标题 </span>
                            </div>
                        </div>
                        <div class="xj-elementshow">
                            <draggable v-model="items" v-bind="dragOptions">
                                <transition-group tag="div">
                                    <div
                                        v-for="(item, index) in items"
                                        :key="index"
                                        :class="item.showclass ? 'xj-border' : ''"
                                        @mouseover="mouseover(item)"
                                        @mouseout="mouseout(item)"
                                    >
                                        <div v-show="item.showclass ? true : false">
                                            <i class="iconfont xj-middle-top" @click="clickTop(index)">&#xe654;</i>
                                            <i class="iconfont xj-middle-down" @click="clickDown(index)">&#xe654;</i>
                                            <i class="iconfont xj-right-top-close" @click="clickClose(index)">&#xe60b;</i>
                                        </div>
                                        <div
                                            v-if="item.div"
                                            v-html="item.div ? item.div : ''"
                                            @click="clickEdit(item, index)"
                                            style="width: 100%"
                                        ></div>
                                        <component
                                            :is="item.component"
                                            v-if="item.component ? true : false"
                                            :customtext="item.customtext"
                                            :lunbotu="item.swiperimg"
                                            :course="item.course"
                                            :dantu="item.dantuimg"
                                            :gonggao="item.gonggaotext"
                                            :eyegzh="item.eyegzhtext"
                                            :tuwennav="item.tuwennavimg"
                                            :youhuinav="item.youhuinavimg"
                                            :category="item.categorydata"
                                            :ref="item.component + index"
                                            :prevent="true"
                                            @click.native="clickEdit(item, index, $event)"
                                        >
                                        </component>
                                    </div>
                                </transition-group>
                            </draggable>
                        </div>
                    </div>
                    <xjmenubar @click.native="clickMenu($event)" :menubar="tabbar" :prevent="true"></xjmenubar>
                </div>
                <!-- <div class="xj-editcontent" :style="mt"> -->
                <div class="xj-editcontent" style="position: fixed; margin-left: 400px">
                    <xjmenubaredit :menubar="tabbar" v-show="ismenuedit" ref="menubar"></xjmenubaredit>
                    <!-- <div v-if="nowname=='customtext'?true:false">
					</div> -->
                    <component
                        :is="currenteditComponent"
                        v-if="nowitem ? true : false"
                        :customtext="nowitem.customtext"
                        :lunbotu="nowitem.swiperimg"
                        :dantu="nowitem.dantuimg"
                        :gonggao="nowitem.gonggaotext"
                        :eyegzh="nowitem.eyegzhtext"
                        :tuwennav="nowitem.tuwennavimg"
                        :youhuinav="nowitem.youhuinavimg"
                        :ref="nowitem.name"
                    >
                    </component>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getElementData, addPhonePageData, getPhonePageData } from '../../api/index.js';
import draggable from 'vuedraggable';
import xjsearch from '@/components/shop/xjsearch.vue';
import xjsearchedit from '@/components/shop/xjsearchedit.vue';
import xjcustomtext from '@/components/shop/xjcustomtext.vue';
import xjcustomtextedit from '@/components/shop/xjcustomtextedit.vue';
import xjlunbotu from '@/components/shop/xjlunbotu.vue';
import xjlunbotuedit from '@/components/shop/xjlunbotuedit.vue';
import xjdantu from '@/components/shop/xjdantu.vue';
import xjdantuedit from '@/components/shop/xjdantuedit.vue';
import xjgonggao from '@/components/shop/xjgonggao.vue';
import xjgonggaoedit from '@/components/shop/xjgonggaoedit.vue';
import xjeyegzh from '@/components/shop/xjeyegzh.vue';
import xjeyegzhedit from '@/components/shop/xjeyegzhedit.vue';
import xjtuwennav from '@/components/shop/xjtuwennav.vue';
import xjtuwennavedit from '@/components/shop/xjtuwennavedit.vue';
import xjyouhuinav from '@/components/shop/xjyouhuinav.vue';
import xjyouhuinavedit from '@/components/shop/xjyouhuinavedit.vue';
import xjmenubar from '@/components/shop/xjmenubar.vue';
import xjmenubaredit from '@/components/shop/xjmenubaredit.vue';
import xjcategory from '@/components/shop/xjcategory.vue';
import xjcategoryedit from '@/components/shop/xjcategoryedit.vue';
import xjuserservice from '@/components/shop/xjuserservice.vue';
import xjcourselist from '@/components/shop/xjcourselist.vue';
import xjcourselistedit from '@/components/shop/xjcourselistedit.vue';
export default {
    components: {
        draggable,
        xjsearch,
        xjsearchedit,
        xjcustomtext,
        xjcustomtextedit,
        xjlunbotu,
        xjlunbotuedit,
        xjdantu,
        xjdantuedit,
        xjgonggao,
        xjgonggaoedit,
        xjeyegzh,
        xjeyegzhedit,
        xjtuwennav,
        xjtuwennavedit,
        xjmenubar,
        xjmenubaredit,
        xjcategory,
        xjcategoryedit,
        xjuserservice,
        xjyouhuinav,
        xjyouhuinavedit,
        xjcourselist,
        xjcourselistedit
    },
    data() {
        return {
            flag: false,
            dragOptions: {
                //拖拽组件默认设置
                animation: 120,
                scroll: true,
                group: 'sortlist',
                ghostClass: 'ghost-style'
            },
            items: [], //最终保存的JSON元素信息
            pageelementlist: '', //上面元素列表
            contentelementlist: '', //下面元素列表
            nowitem: '', //现在编辑的JSON元素
            shopdataid: localStorage.getItem('shopdataid') ? localStorage.getItem('shopdataid') : '', //采用的shopdataid，启用的是哪个编辑样式
            domainname: localStorage.getItem('domainname') ? localStorage.getItem('domainname') : 'xuejing',
            nowindex: '', //现在编辑的JSON元素索引
            tabbar: [], //底部菜单元素值
            ismenuedit: false, //默认不显示菜单编辑组件
            nowtop: '' //控制编辑组件的位置
        };
    },
    beforeRouteLeave(to, from, next) {
        // console.log(to, from, next, 111111111111);
        if (this.flag) {
            this.$confirm('确认要离开此页面吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
					next();
                })
                .catch(() => {
					next(false);
                });
        } else {
            next();
        }
    },
    methods: {
        mouseover(item) {
            item.showclass = true; //显示上移下移关闭控件   去别的页面的方法在哪里 我直接点左边切换 或者我直接点浏览器的返回 他要提示//  点左边切换方法在哪里
        },
        mouseout(item) {
            //离开就不显示上移下移关闭控件
            item.showclass = false;
        },
        addElement(id) {
            this.flag = true;
            //添加元素组件
            let onejson = this.pageelementlist[id - 1];
            console.log(onejson);
            let element = new Object();
            element.id = onejson.id;
            element.name = onejson.name;
            element.class = onejson.class;
            element.div = onejson.div;
            element.component = onejson.component;
            element.showclass = false;
            element.customtext = { modifytext: '' };
            element.swiperimg = [];
            element.dantuimg = { src: '', url: '', title: '' };
            element.gonggaotext = [
                { title: '', text: '', url: '' },
                { title: '', text: '', url: '' },
                { title: '', text: '', url: '' }
            ];
            element.eyegzhtext = { text: '', url: '' };
            element.tuwennavimg = [
                { title: '', text: '自定义1', name: 'photo', color: '', src: '', purl: '', url: '' },
                { title: '', text: '自定义2', name: 'photo', color: '', src: '', purl: '', url: '' },
                { title: '', text: '自定义3', name: 'photo', color: '', src: '', purl: '', url: '' },
                { title: '', text: '自定义4', name: 'photo', color: '', src: '', purl: '', url: '' }
            ];
            element.youhuinavimg = [
                { title: '', menkan_price: '0', name: 'photo', jian_price: 1, src: '', purl: '', url: '' },
                { title: '', menkan_price: '0', name: 'photo', jian_price: 1, src: '', purl: '', url: '' }
            ];
            element.course = { id: -2, name: '' };
            element.categorydata = { id: -1, name: '' };

            this.nowindex = this.items.push(element);
            this.nowitem = element;
            console.log(this.items);
        },
        clickTop(index) {
            //向上移动组件
            if (index == 0) {
                return;
            }
            let src = index;
            let dst = index - 1;
            const newItems = [...this.items];
            newItems.splice(dst, 0, ...newItems.splice(src, 1));
            this.items = newItems;
        },
        clickDown(index) {
            //向下移动组件
            let src = index;
            let dst = index + 1;
            const newItems = [...this.items];
            newItems.splice(dst, 0, ...newItems.splice(src, 1));
            this.items = newItems;
        },
        clickClose(index) {
            //关闭组件
            let src = index;
            this.items.splice(src, 1);
            this.nowitem = '';
        },
        clickEdit(item, index, e) {
            //编辑组件，打开另一个编辑组件
            this.nowtop = e.y;
            this.ismenuedit = false;
            this.nowitem = item;
            this.nowindex = index;
            if (this.nowitem.name == 'tuwennav') {
                setTimeout(() => {
                    this.$refs.tuwennav.value = this.nowitem.tuwennavimg.length;
                }, 200);
            }
            //console.log(this.nowitem);
        },
        getElementData() {
            //显示左边元素列表
            getElementData().then((res) => {
                console.log(res);
                this.pageelementlist = res.list.slice(0, 10);
                this.contentelementlist = res.list.slice(10);
            });
        },
        getPhonePageData() {
            //加载显示保存后的元素组件
            let shopdataid = this.shopdataid;
            if (!shopdataid) {
                return;
            }
            getPhonePageData({ shopdataid }).then((res) => {
                if (res.code == 1) {
                    this.items = res.data.phonepagedata;
                    this.tabbar = res.data.tabbar ? res.data.tabbar : this.tabbar;
                } else {
                    //console.log("获取手机页面数据失败");
                }
            });
        },
        clickMenu(e) {
            //编辑底部菜单，打开菜单编辑组件
            this.nowtop = e.y - 300; //获得点击的y坐标
            this.nowitem = '';
            this.ismenuedit = true;
            this.$refs.menubar.value = this.tabbar.length;
        },
        savePhone() {
            //保存编辑
            this.flag = false;
            let thatitems = this.items;
            console.log(thatitems);
            let data = { shopdata: JSON.stringify(thatitems), tabbar: JSON.stringify(this.tabbar), shopdataid: this.shopdataid };
            addPhonePageData(data).then((res) => {
                if (res.code == 1) {
                    this.shopdataid = res.data;
                    localStorage.setItem('shopdataid', this.shopdataid);
                    this.$alert('恭喜您，装修店铺成功！', '消息提示', {
                        confirmButtonText: '确定'
                    });
                } else if (res.code == -1) {
                    this.$alert('非法请求！', '消息提示', {
                        confirmButtonText: '取消'
                    });
                } else if (res.code == -2) {
                    this.$alert('请装修店铺后再保存！', '消息提示', {
                        confirmButtonText: '确定'
                    });
                } else if (res.code == 2) {
                    this.$alert('装修店铺保存成功！', '消息提示', {
                        confirmButtonText: '确定'
                    });
                } else if (res.code == 3) {
                    this.$alert('没有新增元素，店铺不用保存！', '消息提示', {
                        confirmButtonText: '确定'
                    });
                } else {
                    this.$alert('不好意思，装修店铺保存失败！', '消息提示', {
                        confirmButtonText: '取消'
                    });
                }
            });
        }
    },
    created() {
        this.tabbar = [
            { text: '首页', name: 'wap-home-o', color: '', src: '', purl: '/shop/' + this.domainname, url: '', islink: false },
            { text: '分类', name: 'notes-o', color: '', src: '', purl: '/xuejing/category/' + this.domainname, url: '', islink: false },
            { text: '购物车', name: 'cart-o', color: '', src: '', purl: '/xuejing/shopcart/' + this.domainname, url: '', islink: false },
            { text: '我', name: 'user-o', color: '', src: '', purl: '/xuejing/my/' + this.domainname, url: '', islink: false }
        ];
        //console.log(this.tabbar);
        this.getElementData(); //得到左边元素列表
        this.getPhonePageData(); //得到手机组件页面战士
    },
    computed: {
        currenteditComponent: function () {
            //动态编辑组件
            if (this.nowitem.component) return this.nowitem.component + 'edit';
        },
        mt: function () {
            //右边编辑组件显示位置调整
            return { 'margin-top': this.nowtop + 'px' };
        }
    }
};
</script>
<style lang="scss" scoped>
.xj-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;

    .xj-header {
        line-height: 35px;
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;
        span {
            margin-left: 20px;
        }
    }

    .xj-main {
        width: 100%;
        display: flex;

        .xj-set {
            //height: 850px;
            width: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .xj-save {
                width: 220px;
                height: 50px;
                line-height: 50px;
                text-align: center;

                .xj-btn {
                    width: 220px;
                    height: 50px;
                }
            }

            ::-webkit-scrollbar {
                width: 2px;
                background-color: #aeaeae;
            }

            .xj-scroll {
                //height: 700px;
                width: 224px;
                overflow-y: scroll;

                .xj-pageelement {
                    height: 312px;
                    width: 220px;
                    display: flex;
                    flex-direction: column;
                    background-color: #f5f5f5;
                    border: 1px solid #ddd;
                }

                .xj-contentlist {
                    margin-top: 10px;
                    height: 415px;
                    width: 220px;
                    display: flex;
                    flex-direction: column;
                    background-color: #f5f5f5;
                    border: 1px solid #ddd;
                }
            }
        }

        ::-webkit-scrollbar {
            display: none;
        }
        .xj-show {
            height: 850px;
            width: 100%;
            display: flex;
            overflow-y: scroll;

            .xj-editcontent {
                width: 70%;
            }

            .xj-phoneshow {
                width: 375px;
                display: flex;
                flex-direction: column;

                .xj-phonetop {
                    background-color: white;
                    border: 1px solid #ddd;

                    .xj-pageheader {
                        height: 50px;
                        width: 100%;
                        position: relative;

                        .config-preview {
                            background: url(../../assets/img/img_top_weixin.png) no-repeat;
                            background-size: cover;
                            width: 100%;
                            height: 50px;
                            border-radius: 4px 4px 0 0;
                            position: relative;

                            .page-title {
                                display: block;
                                width: 100%;
                                text-align: center;
                                position: absolute;
                                bottom: 3px;
                                font-weight: 700;
                                font-size: 16px;
                                left: 0;
                                color: #fff;
                            }
                        }
                    }

                    // ::-webkit-scrollbar {
                    // 	width: 0px;
                    // 	background-color: #AEAEAE;
                    // }

                    .xj-elementshow {
                        width: 100%;
                        min-height: 620px;
                        display: block;
                        //overflow-y: scroll;
                    }
                }
            }
        }
    }
}

.xj-elementheader {
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 700;

    span {
        margin-left: 10px;
    }
}

.xj-moreelement {
    display: flex;
    flex-flow: row wrap;

    .object-item {
        width: 108px;
        height: 50px;
        border: 1px solid #ddd;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        p {
            font-size: 12px;
        }
    }
}

.xj-border {
    border: 1px dashed #03b8cf;
    position: relative;
    z-index: 888;

    .xj-middle-top {
        font-size: 24px;
        position: absolute;
        top: -12px;
        left: 50%;
        margin-left: -12px;
        z-index: 9999;
        color: gray;
        //margin-left:-10px;
    }

    .xj-middle-down {
        transform: rotate(180deg);
        font-size: 24px;
        position: absolute;
        bottom: -12px;
        left: 50%;
        margin-left: -12px;
        z-index: 9999;
        color: gray;
        //margin-left:-10px;
    }

    .xj-right-top-close {
        font-size: 24px;
        position: absolute;
        top: -12px;
        right: -12px;
        z-index: 9999;
        color: gray;
    }
}
</style>
